<template>
  <div class="dataScreen-lf">
    <div class="dataScreen-top">
      <normalCard title="网络运行情况">
        <LeftTop @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
    <div class="dataScreen-center">
      <normalCard title="倒三角支撑">
        <template #button>
          <el-button
            type="primary"
            :size="'small'"
            class="btnChange"
            :class="{ activeBtn: activeTab === '年' }"
            @click="handleTabChange('年')"
          >
            年
          </el-button>
          <el-button
            type="primary"
            :size="'small'"
            class="btnChange"
            :class="{ activeBtn: activeTab === '月' }"
            @click="handleTabChange('月')"
          >
            月
          </el-button>
        </template>
        <LeftCenter :active-tab="activeTab" @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
    <div class="dataScreen-bottom">
      <normalCard title="易访库用户跟进">
        <LeftBottom @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
  </div>
  <div class="dataScreen-ct">
    <div class="dataScreen-map">
      <div class="dataScreen-map-title">湖南长沙</div>
      <div class="dataScreen-alarm">
        <ChinaMapChart />
      </div>
    </div>
    <div class="dataScreen-cb">
      <normalCard title="满意度">
        <CenterBottom @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
  </div>
  <div class="dataScreen-rg">
    <div class="dataScreen-top">
      <normalCard title="省重点工作">
        <RightTop @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
    <div class="dataScreen-center">
      <normalCard title="网络故障调度">
        <rightCenter @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
    <div class="dataScreen-bottom">
      <normalCard title="应急通信调度">
        <template #button>
          <el-button type="primary" :size="'small'" class="btnChange" @click="keyIndicatorsDialog('演唱会', [])">
            演唱会
          </el-button>
        </template>
        <RightBottom @click-event="keyIndicatorsDialog" />
      </normalCard>
    </div>
  </div>

  <el-dialog
    class="dt-dialog"
    v-model="visible"
    :close-on-click-modal="true"
    :title="topTitle"
    :width="1350"
    :centered="true"
    modal-class="dt-overlay"
  >
    <el-row :gutter="16">
      <el-col :span="24">
        <Dialog></Dialog>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// 假设这些组件已经存在
import normalCard from "../../components/normalCard.vue";
import ChinaMapChart from "../../components/ChinaMapChart.vue";
import CenterBottom from "./components/center-bottom.vue";
import RightTop from "./components/right-top.vue";
import rightCenter from "./components/right-center.vue";
import RightBottom from "./components/right-bottom.vue";
import LeftTop from "./components/left-top.vue";
import LeftCenter from "./components/left-center.vue";
import LeftBottom from "./components/left-bottom.vue";
import Dialog from "./components/MainComponent.vue";
// import MainFrame from "../../components/MainFrame.vue";
import { useShareStore } from "@/stores/modules/share";
import { useRouter } from "vue-router";

const router = useRouter();
const visible = ref(false);
const topTitle = ref("");
const shareStore = useShareStore();

const keyIndicatorsDialog = (name, flag) => {
  shareStore.set_title(name);
  if (name === "家宽满意度") {
    router.push({ name: "onePage" });
  } else if (name === "演唱会") {
    router.push({ name: "Show" });
  } else {
    router.push({ name: "detailedPage" });
  }
  // topTitle.value = name;
  // visible.value = true;
  console.log("keyIndicatorsDialog", name, flag);
};
// const goTo = (url: string) => {
//   router.push(url);
// };

const activeTab = ref("年");

const handleTabChange = (tab: string) => {
  activeTab.value = tab;
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.btnChange {
  font-size: 16px;
  color: #91c7ff;
  background-color: rgb(18 142 255 / 30%);
  border: 1px solid rgb(18 142 255 / 80%);
}
.activeBtn {
  color: #ffffff;
  background-color: #0c9bff;
  background-image: radial-gradient(
    circle at 50% 0.014%,
    rgb(20 180 255 / 40%) 0%,
    rgb(20 180 255 / 40%) 0%,
    rgb(39 115 255 / 20%) 98%
  );
}
</style>
